<!--&lt;!&ndash;-->
<!--  * 首页-->
<!--  *-->
<!--  * @Author:    1024创新实验室-主任：卓大-->
<!--  * @Date:      2022-09-12 22:34:00-->
<!--  * @Wechat:    zhuda1024-->
<!--  * @Email:     lab1024@163.com-->
<!--  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012-->
<!--  *-->
<!--&ndash;&gt;-->
<!--<template>-->
<!--  &lt;!&ndash;  顶部用户信息&ndash;&gt;-->
<!--  <a-row>-->
<!--    <HomeHeader />-->
<!--  </a-row>-->
<!--  &lt;!&ndash;下方左右布局&ndash;&gt;-->
<!--  <a-row :gutter="[10, 10]">-->
<!--    &lt;!&ndash;左侧&ndash;&gt;-->
<!--    <a-col :span="16">-->
<!--      <a-row :gutter="[10, 10]">-->
<!--        &lt;!&ndash;公告信息&ndash;&gt;-->
<!--        <a-col :span="12">-->
<!--          <HomeNotice title="公告" :noticeTypeId="1" />-->
<!--        </a-col>-->
<!--        &lt;!&ndash;企业动态&ndash;&gt;-->
<!--        <a-col :span="12">-->
<!--          <HomeNotice title="通知" :noticeTypeId="2" />-->
<!--        </a-col>-->
<!--        &lt;!&ndash;各类报表&ndash;&gt;-->
<!--        &lt;!&ndash; <a-col :span="6">-->
<!--          <Gauge :percent="saleTargetPercent" />-->
<!--        </a-col> &ndash;&gt;-->
<!--        <a-col :span="12">-->
<!--          <Pie />-->
<!--        </a-col>-->
<!--        <a-col :span="12">-->
<!--          <Category />-->
<!--        </a-col>-->
<!--        <a-col :span="24">-->
<!--          <Gradient />-->
<!--        </a-col>-->
<!--      </a-row>-->
<!--    </a-col>-->
<!--    &lt;!&ndash;右侧&ndash;&gt;-->
<!--    <a-col :span="8">-->
<!--      <a-row :gutter="[10, 10]">-->
<!--        &lt;!&ndash;快捷入口&ndash;&gt;-->
<!--        &lt;!&ndash; <a-col :span="24">-->
<!--          <HomeQuickEntry />-->
<!--        </a-col> &ndash;&gt;-->
<!--        &lt;!&ndash;关注公众号&ndash;&gt;-->
<!--        <a-col :span="24">-->
<!--          <OfficialAccountCard />-->
<!--        </a-col>-->
<!--        &lt;!&ndash;更新日志&ndash;&gt;-->
<!--        <a-col :span="24">-->
<!--          <ChangelogCard />-->
<!--        </a-col>-->
<!--        &lt;!&ndash;待办、已办&ndash;&gt;-->
<!--        <a-col :span="24">-->
<!--          <ToBeDoneCard />-->
<!--        </a-col>-->
<!--      </a-row>-->
<!--    </a-col>-->
<!--&lt;!&ndash;    <AdModal/>&ndash;&gt;-->
<!--  </a-row>-->
<!--</template>-->
<!--<script setup>-->
<!--  import { computed } from 'vue';-->
<!--  import HomeHeader from './home-header.vue';-->
<!--  import HomeNotice from './home-notice.vue';-->
<!--  import OfficialAccountCard from './components/official-account-card.vue';-->
<!--  import ToBeDoneCard from './components/to-be-done-card/home-to-be-done.vue';-->
<!--  import ChangelogCard from './components/changelog-card.vue';-->
<!--  import Category from './components/echarts/category.vue';-->
<!--  import Pie from './components/echarts/pie.vue';-->
<!--  import Gradient from './components/echarts/gradient.vue';-->
<!--  // import AdModal from './ad-modal.vue';-->

<!--  // 业绩完成百分比-->
<!--  const saleTargetPercent = computed(() => {-->
<!--    return 75;-->
<!--  });-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--  @import './index.less';-->
<!--</style>-->


<template>
  <div class="dashboard-wrapper">
    <a-row :gutter="24" class="header-section">
      <a-col :span="12">
        <h1 class="page-title">质量标准</h1>
        <a-space :size="8">
          <a-button type="primary">登录</a-button>
          <a-button>阅读文档</a-button>
        </a-space>
      </a-col>

      <a-col :span="12" class="stats-container">
        <a-row :gutter="16">
          <a-col :span="8" class="stat-item">
            <div class="stat-value primary-color">2</div>
            <div class="stat-label">已分析的项目</div>
          </a-col>

          <a-col :span="16" class="metric-list">
            <div class="metric-item">
              <span class="metric-value red-color">194</span>
              <span class="metric-label">Bugs</span>
            </div>
            <div class="metric-item">
              <span class="metric-value orange-color">19</span>
              <span class="metric-label">漏洞</span>
            </div>
            <div class="metric-item">
              <span class="metric-value blue-color">2.5K</span>
              <span class="metric-label">异味</span>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-divider style="margin: 40px 0;" />

    <div class="language-section">
      <h2 class="section-title">多语言</h2>
      <p class="section-description">
        ScvDetect 已支持 20+ 种编程语言，感谢我们的内部代码分析器，包含：
      </p>

      <a-row :gutter="[16, 16]">
        <a-col v-for="lang in languages" :key="lang" :span="3">
          <div class="language-tag">{{ lang }}</div>
        </a-col>
      </a-row>
    </div>

    <a-divider style="margin: 40px 0;" />

    <div class="quality-model-section">
      <h2 class="section-title">质量模型</h2>
      <a-row :gutter="24">
        <a-col :span="8">
          <div class="model-card">
            <p class="model-title"><span class="icon red-icon">★</span> Bugs</p>
            <p class="model-content">
              Bugs 是出现了明显错误或高度近似期望之外行为的代码。
            </p>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="model-card">
            <p class="model-title"><span class="icon orange-icon">●</span> 漏洞</p>
            <p class="model-content">
              漏洞 是指代码中可能出现被黑客利用的潜在风险点。
            </p>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="model-card">
            <p class="model-title"><span class="icon blue-icon">♺</span> 异味</p>
            <p class="model-content">
              异味 会降低代码维护性并降低他们的开发效率。主要的衡量标准是修复它们所费的时间。
            </p>
          </div>
        </a-col>
      </a-row>
    </div>

    <a-divider style="margin: 40px 0;" />

    <div class="feature-section">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card :bordered="false" class="feature-card">
            <a-card-meta title="编写整洁代码" />
            <p class="card-description">
              把出现在代码里的新问题都解决掉，就可以创建一个干净的维护代码基础。即使是遗留项目，保持代码的整洁，也能最终获得一个值得骄傲的代码基础。
            </p>
            <a-button type="link" class="more-detail-link">更多细节</a-button>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" class="feature-card">
            <a-card-meta title="修复代码缺陷" />
            <p class="card-description">
              缺陷的累积和默认质量标准是基于新代码周期的。当前周期就是处理问题的时间。主要的关注点是上一个版本，通常会选择 30 天作为一个周期。
            </p>
            <a-button type="link" class="more-detail-link">更多细节</a-button>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const languages = ref([
  'Java', 'C/C++', 'C#', 'ABAP', 'HTML', 'RPG', 'JavaScript', 'TypeScript', 'Objective C', 'XML',
  'VB.NET', 'PL/SQL', 'T-SQL', 'Flex', 'Python', 'Groovy', 'PHP', 'Swift', 'Visual Basic', 'PL/I'
]);
</script>

<style scoped>
/* 容器和通用样式 */
.dashboard-wrapper {
  padding: 40px 80px; /* 模拟中心内容区域的内边距 */
  background-color: #fff;
  min-height: 100vh;
}
.page-title {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 16px;
}
.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}
.section-description {
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 24px;
}

/* 1. 顶部概览/统计区域样式 */
.stats-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 16px;
  text-align: right;
}
.stat-item {
  border-right: 1px solid #f0f0f0;
  padding-right: 24px;
}
.stat-value {
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
}
.stat-label {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin-top: 8px;
}

.metric-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 24px;
}
.metric-item {
  margin-bottom: 4px;
}
.metric-value {
  font-size: 18px;
  font-weight: 500;
  margin-right: 8px;
}
.metric-label {
  color: rgba(0, 0, 0, 0.85);
}

/* 颜色定义 (Ant Design 默认颜色) */
.primary-color { color: #1890ff; }
.red-color { color: #ff4d4f; }
.orange-color { color: #faad14; }
.blue-color { color: #1890ff; }

/* 2. 多语言支持区域样式 */
.language-tag {
  background: #f0f2f5;
  padding: 8px 0;
  text-align: center;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}
.language-tag:hover {
  background: #e6f7ff;
  color: #1890ff;
}

/* 3. 质量模型说明区域样式 */
.model-card {
  padding: 16px;
}
.model-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.model-content {
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.8;
}
.model-card .icon {
  font-size: 18px;
  margin-right: 8px;
}
.red-icon { color: #ff4d4f; }
.orange-icon { color: #faad14; }
.blue-icon { color: #1890ff; }


/* 4. 底部内容卡片区域样式 */
.feature-card {
  padding: 0;
}
.feature-card :deep(.ant-card-meta-title) {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 12px;
}
.card-description {
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.8;
  min-height: 70px; /* 确保卡片高度一致 */
}
.more-detail-link {
  padding: 0;
  height: auto;
}
</style>

